<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed vs methods</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="case11-demo2">
    <p>原始字符串:{{message}}</p>
    <p>计算后反转字符串:{{reversedMessage}}</p>
    <p>计算后反转字符串:{{reversedMessage}}</p>
    <p>使用方法后反转字符串:{{reversedMessage2()}}</p>
    <p>使用方法后反转字符串:{{reversedMessage2()}}</p>
</div>
<script type="text/javascript">
    var cnt=1
    var case11Demo2 = new Vue({
        el: "#case11-demo2",
        data: {
            message: "slsher!"
        },
        computed: {
            //计算属性的getter
            reversedMessage: function () {
                //‘this’指向case11Demo2实例
                cnt+=1
                return cnt+this.message.split("").reverse().join("")
            }
        },
        methods: {
            reversedMessage2: function () {
                cnt+=1
                return cnt+this.message.split("").reverse().join("")
            }
        }
    })
</script>
</body>
</html>